<template>
  <div class="header">
<div class="header-left"><div class="iconfont back-icon">&#xe618;</div></div>
<div class="header-input"><span class="iconfont">&#xe647;</span>输入城市/景点/游玩主题</div>
<router-link to = "/city"><div class="header-right">{{this.city}}<span class="iconfont ">&#xe64a;</span></div></router-link>

  </div>
</template>

<script>
import { mapState } from 'vuex'
export default {
      computed:{
        ...mapState(['city'])
      }
}
</script>

<style  >
.back-icon{
  font-size: .4rem;
  text-align: center;
}

.header{
   line-height : .86rem;
   display :  flex;
   background: #00bcd4;
   color: #fff
}

.header-left{
     width :.64rem;
     float : left ;
}
.header-right{
  padding:  0  .1rem;
  min-width: 1.04rem;
    float : right;
    text-align: center;
    color: #fff;
}
 .header-input{
   height:.64rem;
   flex:1;
line-height: .64rem;
   margin-top: .12rem;
   margin-left: .2rem;
   background: #fff;
   border-radius: .1rem;
   color: #ccc;
   padding-left: .2rem;
 }
 .header-right{
   width: 1.24rem;
   float:right;
   text-align: center;
 }
</style>
